<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>好好读书</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="box">
    <div class="top">
        <div class="user">
            <div class="login">
                <a class="user_a" href="pages/login.html" target="_blank">登录</a>
                <span>|</span>
                <a class="user_a" href="pages/sign.html" target="_blank">注册</a>
            </div>
            <div class="mess">
                <ul>
                    <li><a class="user_a" href="" target="_blank">购物车</a></li>
                    <li><a class="user_a" href="" target="_blank">我的订单</a></li>
                    <li><a class="user_a" href="" target="_blank">我的账户</a></li>
                    <li><a class="user_a" href="" target="_blank">帮助中心</a></li>
                </ul>
            </div>
        </div>
        <div class="title">
            <div class="logo"></div>
            <div class="search">
                <div class="search_bar">
                    <input class="search_input" placeholder="   及时雨会神行太保 黑旋风战浪里白条" type="text" >
                    <select class="search_type" >
                        <option value="all" >全部</option>
                        <option value="book_name">书名</option>
                        <option value="zuozhe">作者</option>
                        <option value="chuban">出版社</option>
                    </select>
                </div>
                <div class="search_btn" onclick="func()" >搜索</div>
            </div>
        </div>
        <div class="bar">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="pages/jingxuan.html" target="_blank">精选</a></li>
                <li><a href="pages/xinshu.html" target="_blank">新书</a></li>
                <li><a href="pages/reping.html" target="_blank">热评</a></li>
                <li><a href="pages/paihang.html" target="_blank">排行榜</a></li>
            </ul>
        </div>
    </div>
    <!--用图片分隔，好看-->
    <div style="width: 1200px;height:60px;background-image: url('image/bar.png');background-size: cover"></div>
    <div class="bottom">
        <div class="left">
            <div class="left_title">
                <h2>全部分类</h2>
            </div>
            <div class="items">
                <div class="item" style="background-color: #e9e7e6">
                    <a href="" target="_blank">
                        <div class="book_type">文艺</div>
                        <ul>
                            <li>文学</li>
                            <li>青春</li>
                            <li>传记</li>
                            <li>艺术</li>
                            <li>动漫</li>
                            <li>幽默</li>
                        </ul>
                    </a>
                </div>
                <div class="item" style="background-color: #f6f6f6">
                    <a href="" target="_blank">
                        <div class="book_type">小说</div>
                        <ul>
                            <li>侦探</li>
                            <li>悬疑</li>
                            <li>悬疑</li>
                            <li>情感</li>
                            <li>都市</li>
                            <li>科幻</li>
                        </ul>
                    </a>
                </div>
                <div class="item" style="background-color: #e9e7e6">
                    <a href="" target="_blank">
                        <div class="book_type">文艺</div>
                        <ul>
                            <li>文学</li>
                            <li>青春文学</li>
                            <li>传记</li>
                            <li>艺术</li>
                            <li>动漫</li>
                            <li>幽默</li>
                        </ul>
                    </a>
                </div>
                <div class="item" style="background-color: #f6f6f6">
                    <a href="" target="_blank">
                        <div class="book_type">文艺</div>
                        <ul>
                            <li>文学</li>
                            <li>青春文学</li>
                            <li>传记</li>
                            <li>艺术</li>
                            <li>动漫</li>
                            <li>幽默</li>
                        </ul>
                    </a>
                </div>
                <div class="item" style="background-color: #e9e7e6">
                    <a href="" target="_blank">
                        <div class="book_type">文艺</div>
                        <ul>
                            <li>文学</li>
                            <li>青春文学</li>
                            <li>传记</li>
                            <li>艺术</li>
                            <li>动漫</li>
                            <li>幽默</li>
                        </ul>
                    </a>
                </div>
                <div class="item" style="background-color: #f6f6f6">
                    <a href="" target="_blank">
                        <div class="book_type">文艺</div>
                        <ul>
                            <li>文学</li>
                            <li>青春文学</li>
                            <li>传记</li>
                            <li>艺术</li>
                            <li>动漫</li>
                            <li>幽默</li>
                        </ul>
                    </a>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="slide">
                <div class="image"></div>
                <div class="text"></div>
            </div>
            <div class="tips">Tip：如果你爱上一朵花，而她住在一颗星星上，那么，在夜里仰望天空就会是一件甜蜜的事，所有的星星都会盛开。</div>
            <div class="a_book">
                <div class="title">小崔推荐：</div>
                <div class="content">
                    <div class="xiaowangzi">
                        <div class="con_left">
                            <div class="book_top">
                                <div class="image"></div>
                                <div class="info">

                                    <div class="name">小王子</div>
                                    <div>
                                        <span class="pl">作者:[法国]</span><br>
                                        <a id="zuozhe" href="https://book.douban.com/author/688281/">安东尼·德·圣-埃克苏佩里</a><br><br>
                                        <span class="pl">原作名:</span>
                                        <span>Le Petit Prince</span><br><br>
                                        <span class="pl">ISBN:</span>
                                        <span> 9787020042494</span>

                                    </div>
                                </div>

                            </div>
                            <div class="book_bottom">
                                <div class="neirong">内容简介  · · · · · ·</div>
                                <div class="jianjie">
                                    <span>小王子是一个超凡脱俗的仙童，他住在一颗只比他大一丁点儿的小行星上。陪伴他的是一朵他非常喜爱的小玫瑰花。</span>
                                    <span>但玫瑰花的虚荣心伤害了小王子对她的感情。小王子告别小行星，开始了遨游太空的旅行……</span>
                                </div>
                            </div>

                        </div>
                        <div class="con_right">
                            <div class="zhailu">原文摘录  · · · · · · </div>
                            <div class="yinyong">
                                <span>“对我来说，你还只是一个小男孩，就像其他千万个小男孩一样。我不需要你。你也同样用不着我。</span>
                                <span>对你来说，我也不过是一只狐狸，和其他千万只狐狸一样。</span>
                                <span>但是，如果你驯服了我，我们就互相不可缺少了。</span>
                                <span>对我来说，你就是世界上唯一的了；</span>
                                <span> 我对你来说，也是世界上唯一的了。”</span>
                                <br><br>
                                <span>“如果你驯服了我，我的生活就一定会是欢快的。</span>
                                <span>我会辨认出一种与众不同的脚步声。</span>
                                <span>其他的脚步声会使我躲到地下去，而你的脚步声就会像音乐一样让我从洞里走出来。</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
    function func()
    {
        alert("不可以色色哦！")
    }
</script>
</body>
</html>